<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- media="screen and (max-width:376px)" -->
    <!-- 页面效果需要在屏幕375px及以下时才能显示 -->
    <link rel="stylesheet" href="style/index.css">
</head>
<body>
    <!-- 页面有7个部分 head/轮播图/banner/专栏/资讯/特色一览/优选景区-->
    <div class="container">
        <!-- head部分 -->
        <div class="grid grid-cell head">
            <div class="esc"> <a href=""><img src="./imgs/查看更多@3x.png" alt=""></a></div>
            <div class="head-text">全域旅游地图</div>
            <div class="share"> <a href=""><img src="./imgs/分享-黑.png" alt=""></a></div>
        </div>
        <!-- 轮播图部分 carsousel-->
        <div class="grid grid-cell carousel"> 
            <!-- carousel -->
            <div class="parts">
                <!-- 单选按钮 -->
                    <input type="radio" class="danxuan" name="r" id="r1" checked>
                    <input type="radio" class="danxuan" name="r" id="r2">
                    <input type="radio" class="danxuan" name="r" id="r3">
                    <input type="radio" class="danxuan" name="r" id="r4">
                    <input type="radio" class="danxuan" name="r" id="r5">
                <div class="picture">
                    <div><img src="./imgs/常州poster.jpg" alt="" class="i1"></div>
                   <div><img src="./imgs/环球港.webp" alt=""></div> 
                    <div><img src="./imgs/青枫公园2.jpg" alt=""></div>
                    <div><img src="./imgs/隔湖.webp" alt=""></div>
                    <div><img src="./imgs/金坛.webp" alt=""></div>
                </div>
                <!-- 控制器 control-->
                <!-- label与单选按钮形成关联映射 -->
                <div class="control">
                    <label for="r1"></label>
                    <label for="r2"></label>
                    <label for="r3"></label>
                    <label for="r4"></label>
                    <label for="r5"></label>
                </div>
            </div>
        </div>
        <!-- banner部分 -->
        <div class="grid grid-cell banner">
           <a href=""> <img src="./imgs/旅行.webp" alt=""></a>
        </div>
        <!-- 专栏部分 chapter-->
        <div class="grid grid-cell chapter">

            <div class="chapter-a">
                <div class="top"><span>top</span></div>
                <p><a href="">专栏A</a></p>
            </div>

            <div class="chapter-b">
                <div class="top"><span>top</span></div>
                <p><a href="">专栏B</a></p>
            </div>

            <div class="chapter-c">
                <div class="top"><span>top</span></div>
                <p><a href="">专栏C</a></p>
            </div>

            <div class="chapter-d">
                <div class="top"><span>top</span></div>
                <p><a href="">专栏D</a></p>
            </div>

            <div class="chapter-sights">
                <div class="top"><span>top</span></div>
                <p class="title"><a href="./热门景点.html">热门景点</a></p>
                <p class="content"><a href="./热门景点.html">拍照好去处</a></p>
            </div>

            <div class="chapter-eat">
                <div class="top"><span>top</span></div>
                <p class="title"><a href="./人气美食.html">人气美食</a> </p> 
                <p class="content"><a href="./人气美食.html">味蕾在尖叫</a></p> 
            </div>

            <div class="chapter-hotel">
                <div class="top"><span>top</span></div>
                <p class="title"><a href="./人气酒店.html">人气酒店</a></p> 
                <p class="content"><a href="./人气酒店.html">住宿好去处</a></p>
            </div>
            
            <div class="chapter-rank">
                <div class="top"><span>top</span></div>
                <p class="title"><a href="./当地特色榜.html">当地特色榜</a></p>
                <p class="content"><a href="./当地特色榜.html">原汁原味</a></p>
            </div>
        </div>
        <!-- 资讯部分 info-->
        <div class="grid grid-cell info">
            <div class="info-new"><img src="./imgs/旅游资讯@2x.png" alt=""></div>
            <div class="info-excerpt">
            <p> <a href="./旅游资讯首页.html"> 啥是佩奇？来常州过年，赏花灯、吃大麻糕</a></p>
            <p> <a href="./旅游资讯首页.html"> 常州美食，还是记忆中的味道</a></p>
            <p> <a href="./旅游资讯首页.html"> 常州的诗意生活，从翻开这本美丽日历开始</a></p>
        </div>
            <div class="info-link"><a href="">更多</a></div>
        </div>
        <!-- 特色一览 featured-->
        <div class="grid grid-cell featured">
            <div class="featured-sights"><a href=""><img src="./imgs/景区222@2x.png" alt=""></a></div>
            <div class="featured-eat"><a href=""><img src="./imgs/美食222@2x.png" alt=""></a></div>
            <div class="featured-hotel"><a href=""><img src="./imgs/酒店名宿222@2x.png" alt=""></a></div>
            <div class="featured-goods"><a href=""><img src="./imgs/特色产品222@2x.png" alt=""></a></div>
        </div>
        <!-- 优选景区 prefer-->
        <div class="grid grid-cell prefer">
            <div class="prefer-tns"><a href="./区域首页.html"><div class="fengjing">天宁寺</div><img src="/手机端自适应/imgs/天宁寺.webp" alt=""></a></div>
            <div class="prefer-kly"><a href=""><div class="fengjing">恐龙园</div><img src="./imgs/恐龙园.webp" alt=""></a></div>
            <div class="prefer-yc"><a href=""><div class="fengjing">淹城</div><img src="./imgs/淹城.webp" alt=""></a></div>
            <div class="prefer-xxg"><a href=""><div class="fengjing">嬉戏谷</div><img src="./imgs/嬉戏谷.webp" alt=""></a></div>
            <div class="prefer-qfgy"><a href=""><div class="fengjing">青枫公园</div><img src="./imgs/青枫公园.webp" alt=""></a></div>
            <div class="prefer-hqj"><a href=""><div class="fengjing">环球港</div><img src="./imgs/环球港.webp" alt=""></a></div>
            <div class="prefer-jintan"><a href=""><div class="fengjing">金坛</div><img src="./imgs/金坛.webp" alt=""></a></div>
            <div class="prefer-tmh"><a href=""><div class="fengjing">天目湖</div><img src="./imgs/天目湖.webp" alt=""></a></div>
            <div class="prefer-gehu"><a href=""><div class="fengjing">隔湖</div><img src="./imgs/隔湖.webp" alt="">
            </a></div>
        </div>
    </div>
</body>
</html>